<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>短信验证</title>
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/style.css" />
		<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
		<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
		<script type="text/javascript" src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
		<script type="text/javascript" src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
		<script type="text/javascript" src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>

		<script type="text/javascript">
			function todel() {
				var cb = $("input[name=cb]");
				var tmp = "";
				for(var i = 0; i < cb.length; i++) {
					if(cb[i].checked == true) {
						tmp += cb[i].value + ",";
					}
				};
				if(tmp.length > 0) {
					document.form1.action = "/three/sms/delete?recordId=" + tmp;
					document.form1.submit();
				} else {
					alert("您还没有选中");
				}
			};

			function formReset() {
				$(':input,#form1').not(':button, :submit, :reset, :hidden')
					.val('').removeAttr('checked')
					.removeAttr('selected');
			};

			function allCheck(check) {
				var checkbox = document.getElementsByName("cb");
				if(check.checked) {
					for(var i = 0; i < checkbox.length; i++) {
						checkbox[i].checked = "checked";
					}
				} else {
					for(var i = 0; i < checkbox.length; i++) {
						checkbox[i].checked = "";
					}
				}
			};

			$(function() {
				$('#common-form').find('input[type=checkbox]').bind('click', function() {
					var id = $(this).attr("id");
					if(this.checked) {
						$("#common-form").find('input[type=checkbox]').not(this).attr("checked", false);
						var selectleng = $("input[type='checkbox']:checked").length;
						
					} else {
						console.log("未选中的处理");
					}
				});
			})
			$(document).ready(function() {
				$("input[name=qx]").click(function(){
					 if(this.checked==false){
						 $("input[name=cb1]").prop("checked",false);
					 }else{
						 $("input[name=cb1]").prop("checked",true);
					 }
				});
				$("#confirm").click(function(){
					var phone=$("input[name=cb1]:checked");
					var iphone="";
					var other="";
					if(phone.length!=0){
						$.each(phone,function(index,obj){
							iphone=iphone+obj.value+",";
						});
						iphone=iphone.substr(0,iphone.length-1);
						$("#mobile").val(iphone);
						phone.each(function(){          
						 	 var row=$(this).parent("td").parent("tr");          
						 	 var username=row.find("[name='username']").html();//注意html()和val()         
						 	other+=username+",";
						 });
						other=other.substr(0,other.length-1);
						console.log(iphone);
						$("#address").val(other);
						$("input[name=qx]").prop("checked", false);
						$("input[name=cb1]").prop("checked",false);
						$("#myModal1").modal("hide")
					}else{
						alert("请您选择手机号码，谢谢！");
					}
				});
				$("#shutdwon").click(function() {
					$("input[name=qx]").prop("checked", false);
					$("input[name=cb1]").prop("checked", false);
					
				});
				
			});
			
			$(document).ready(function() {
				$("#send").click(function(){
					 $("#form1").attr("action","/three/sms/save");
					 $("#form1").submit();
				});
				$("#close").click(function(){
					$("#address").val("");
					$("#content").val("");
				})
			})
function checkTr(tr) {
	var tds = tr.childNodes;
	for(var j = 0; j < tds.length; j++) {
		var inputs = tds[j].childNodes;
		for(var i = 0; i < inputs.length; i++)
		{
			if(inputs[i].type == "checkbox") {
				inputs[i].checked = !inputs[i].checked;
				tr.style.backgroundColor = inputs[i].checked ? "#f3fbff" : "";
			}
		}
	}
}
function checkInput(input){
	input.checked=!input.checked;
}
$(document).ready(function(){
	$('.table-sort').dataTable({
		"aaSorting": [[ 5, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"pading":false,
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,7]}// 不参与排序的列
		]
	});
});

		</script>
	</head>

	<body>
		<form action="/three/sms/show" method="post" name="form1" id="form1">
			<table class="table table-bg">
				<tr>
					<tr class="text-c">
						<td>收件人:</td>
						<td><input type="text" name="mobile" class="input-text" style="width:160px" id="mobile"/></td>
						<td>短信内容:</td>
						<td><input type="text" name="content" class="input-text" style="width:160px" /></td>
						<td>创建时间</td>
						<td><input type="date" name="createTime" class="input-text Wdate" style="width:160px;" /> 至:
							<input type="date" name="endTime" class="input-text Wdate" style="width:160px;" /></td>
						<td rowspan="2"><button type="submit"  class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i>查询</button>
							</td>
					</tr>
					<tr class="text-c">
						<td>短信类型:</td>
						<td>
							<select name="smsType" class="select-box" style="width:160px">
								<option value=""></option>
								<option value="1">验证短信</option>
								<option value="2">普通短信</option>
								<option value="3">支付短信</option>
							</select>
						</td>
						<td> 发送状态:</td>
						<td>
							<select name="status" class="select-box" style="width:160px">
								<option value=""></option>
								<option value="1">成功</option>
								<option value="0">失败</option>
							</select>
						</td>
						<td>发送时间:</td>
						<td><input type="date" name="sendTime" style="width:160px;" class="input-text Wdate" /> 至:
							<input type="date" name="sendEndTime" style="width:160px;" class="input-text Wdate" /></td>
					</tr>
			</table>
			 <span>
				<a class="btn btn-primary radius" data-target="#myModal" data-toggle="modal"><i class="Hui-iconfont">&#xe600;</i>发送短信</a>&nbsp;
				<a onclick="todel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
				</span>
			<table class="table table-border table-bordered table-hover table-bg table-sort" style="height:100%">	
				<thead>
				<tr class="text-c" height="40%">
					<td><input type="checkbox" onclick="allCheck(this)" name="all" /></td>
					<td>收件人</td>
					<td>短信内容</td>
					<td>短信类型</td>
					<td>创建时间</td>
					<td>发送时间</td>
					<td>发送状态</td>
					<td>失败原因</td>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${bisSmsRecordlist }" var="bisSmsRecord">
					<tr class="text-c" height="40%" onclick="checkTr(this);">
						<td><input type="checkbox" name="cb" value="${bisSmsRecord.recordId}" onclick="checkInput(this);"/></td>
						<td>${bisSmsRecord.mobile }</td>
						<td>${bisSmsRecord.content }</td>
						<td class="user-status">
							<span class="label label-success">
							<c:if test="${bisSmsRecord.smsType==1 }">验证短信</c:if>
							<c:if test="${bisSmsRecord.smsType==2 }">普通短信</c:if>
							<c:if test="${bisSmsRecord.smsType==3 }">支付短信</c:if>
							</span>
						</td>
						<td>
							<f:formatDate value="${bisSmsRecord.createTime }" pattern="yyyy-MM-dd" />
						</td>
						<td>
							<f:formatDate value="${bisSmsRecord.sendTime }" pattern="yyyy-MM-dd" />
						</td>
						<td>
							<c:if test="${bisSmsRecord.status==0 }">
								<span class="label label-success"><font color="red">失败</font></span>
							</c:if>
							<c:if test="${bisSmsRecord.status==1 }"><span class="label label-success">成功</span></c:if>
						</td>
						<td>${bisSmsRecord.failureCause }</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>

			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 2">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">发送短信</h4>
						</div>
						<div class="modal-body">
							<table>
								<tr>
									<td>
										<div style="width: 70px">
											<font size="3">收件人:</font>
										</div>
									</td>
									<td>
									<input type="hidden" name="mobile" id="mobile">
									<textarea name="address" id="address" cols="60" rows="10" style=" resize:none;"></textarea>
									</td><td>
										<a class="btn btn-primary radius" data-target="#myModal1" data-toggle="modal" id="content" ><i class="Hui-iconfont"></i>选取电话</a>
									</td>
								</tr>
								<tr>
									<td>
										<div style="width: 75px">
											<font size="3">短信内容:</font>
										</div>
									</td>
									<td><textarea name="contents" id="content" cols="60" rows="10" style=" resize:none;"></textarea>
									<td>请输入数字或字母</td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" id="close">取消</button>
							<button type="button" class="btn btn-primary" id="send">发送</button>
						</div>
					</div>
				</div>
			</div>
			
			<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 2">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">联系人</h4>
						</div>
						<div class="modal-body">
							<table class="table table-border table-bordered table-hover table-bg" id="common-form">
								<tr class="text-c" height="50%">
									<td><input type="checkbox" name="qx"/></td>
									<td>用户姓名</td>
									<td>手机号码</td>
								</tr>
								<c:forEach items="${userList }" var="userList">
									<tr class="text-c" height="50%">
										<td><input type="checkbox" name="cb1" value="${userList.mobile}"/></td>
										<td name="username">${userList.username }</td>
										<td>${userList.mobile }</td>
									</tr>
								</c:forEach>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" id="shutdwon">关闭</button>
							<button type="button" class="btn btn-primary" id="confirm">确认</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</body>
</html>